<template>
    <div>     
      <button @click="openModal" class="loginpage">登录</button>
      
      <LoginModal :isVisible="isModalVisible" @close="closeModal" />
    </div>
  </template>
  
  <script>
  import LoginModal from './LoginModal.vue';
  
  export default {
    components: {
      LoginModal
    },
    data() {
      return {
        isModalVisible: false,
      };
    },
    methods: {
      openModal() {
        this.isModalVisible = true;
      },
      closeModal() {
        this.isModalVisible = false;
      }
    }
  };
  </script>
  
  <style>
  .loginpage {
    width: 237px;
    height: 47.99px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: red;
    border-radius: 10px;
    color: white;
  }
  </style>
  